<template>
  <div class="map">
    <div class="map-info">
      <Row>
        <Col span="9">地图：{{ mapLevel }}</Col>
        <Col span="15">地图名：{{ mapName }}</Col>
      </Row>
      <Row>
        <Col span="24">地图完成度：{{ mapPositionCompleteAmount }} / {{ mapPositionAmount }}</Col>
      </Row>
    </div>
    <div class="map-content">
      <div :class="['map-goforward', { 'map-goforward-active': eventLastComplete }]" v-if="mapGoFoward" @click="goForward">前进</div>
      <MapPosition :position="mapPosition" :current-position="mapPositionCurrent" :position-max="mapPositionMax" :event-last-complete="eventLastComplete" :update-flag="updateFlag.local.mapPosition" v-for="mapPosition in mapPositionShowArray" :key="mapPosition.number"
        @click.native="changePosition(mapPosition.number)"></MapPosition>
    </div>
  </div>
</template>

<script>
import MapData from '@/game/data/map'

import MapPosition from '@/components/interface/MapPosition.vue'

export default {
  name: 'Map',

  components: {
    MapPosition
  },

  data() {
    return {
      mapLevel: 0,
      mapName: '',
      mapPositionArray: [],
      mapPositionAmount: 0,
      mapPositionCurrent: 0,
      mapPositionMax: 0,
      mapPositionCompleteAmount: 0,
      mapGoFoward: false,
      eventLastComplete: false,
      updateFlag: {
        map: {
          move: 0,
        },
        event: {
          complete: 0,
        },
        local: {
          mapPosition: 0
        }
      }
    }
  },

  computed: {
    renderCount() {
      return this.$store.state.renderCount
    },

    updateCount() {
      return this.$store.state.updateCount
    },
    mapPositionShowArray() {
      return this.mapPositionArray.slice(0, this.mapPositionMax).reverse()
    }
  },

  watch: {
    renderCount() {
      refreshData(this)
    },
    updateCount() {
      refreshData(this)
      initMap(this)
      updateMapState(this)
      initEvent(this)
    },
    'updateFlag.map.move' (val) {
      if (val) {
        updateMapState(this)
        initEvent(this)
      }
    },
    'updateFlag.event.complete' (val) {
      if (val) {
        updateMapState(this)
        completeEvent(this)
      }
    }
  },

  mounted() {
    refreshData(this)
    initMap(this)
    updateMapState(this)
    initEvent(this)
  },

  methods: {
    goForward() {
      if (this.$game.data.state.event.lastComplete) {
        this.$game.data.state.map.position.max = this.$game.data.state.map.position.max + 1
        this.$game.data.state.event.lastComplete = false
        this.$game.data.state.map.position.current = this.$game.data.state.map.position.max
        this.$game.tempData.updateFlag.map.move = this.$game.tempData.updateFlag.map.move + 1
      }
    },
    changePosition(number) {
      if (this.$game.data.state.map.position.current !== number) {
        this.$game.data.state.map.position.current = number
        this.$game.tempData.updateFlag.map.move = this.$game.tempData.updateFlag.map.move + 1
      }
    }
  },
}

let refreshData = (that) => {
  that.mapLevel = that.$game.data.state.map.level
  that.mapPositionCurrent = that.$game.data.state.map.position.current
  that.mapPositionMax = that.$game.data.state.map.position.max
  that.eventLastComplete = that.$game.data.state.event.lastComplete

  that.updateFlag.map.move = that.$game.tempData.updateFlag.map.move
  that.updateFlag.event.complete = that.$game.tempData.updateFlag.event.complete
}

let initMap = (that) => {
  that.mapName = MapData['level' + that.mapLevel].name
  that.mapPositionAmount = MapData['level' + that.mapLevel].positionAmount
  that.mapPositionArray = []

  let mapPosition = MapData['level' + that.mapLevel].position
  let number = 1;

  for (let i = 0; i < mapPosition.length; i++) {
    if (mapPosition[i].number.length > 1) {
      for (let j = 0; j < (mapPosition[i].number[1] - mapPosition[i].number[0] + 1); j++) {
        number = initMapAddPosition(that, number, mapPosition[i])
      }
    }
    else {
      number = initMapAddPosition(that, number, mapPosition[i])
    }
  }
}

let initMapAddPosition = (that, number, position) => {
  let name = '野外'
  if (position.name !== '') {
    name = position.name
  }

  that.mapPositionArray.push({
    number: number,
    name: name,
    event: position.event,
    targetId: position.targetId
  })
  return number + 1
}

let updateMapState = (that) => {
  !that.eventLastComplete ? that.mapPositionCompleteAmount = that.mapPositionMax - 1 : that.mapPositionCompleteAmount = that.mapPositionMax

  that.mapPositionMax < that.mapPositionAmount ? that.mapGoFoward = true : that.mapGoFoward = false

  that.updateFlag.local.mapPosition = that.updateFlag.local.mapPosition + 1
}

let initEvent = (that) => {
  let currentIndex = that.mapPositionCurrent - 1
  let eventType = that.mapPositionArray[currentIndex].event.type
  that.$game.data.state.event.type = eventType
  that.$game.data.state.event[eventType].id = that.mapPositionArray[currentIndex].event.id
  that.$game.tempData.map.position.name = that.mapPositionArray[currentIndex].name
  that.$game.data.state.map.position.current !== that.$game.data.state.map.position.max || that.$game.data.state.event.lastComplete === true ? that.$game.tempData.event.complete = true : that.$game.tempData.event.complete = false
}

let completeEvent = (that) => {
  that.$game.tempData.event.complete = true
}
</script>

<style lang="scss">

</style>
